<template>
    <div class="playGuide">
      <div class="header">
        <van-nav-bar title="景点游玩指南" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
      </div>
      <div class="banner">
        <van-swipe :autoplay="3000" indicator-color="white" v-if="images.success==true">
          <van-swipe-item v-for="(item,index) in images.data" :key="index">
            <img :src="item.imageUrl" alt="">
          </van-swipe-item>
        </van-swipe>
        <div v-else class="img">
          <img :src="imgUrl" alt="">
        </div>
      </div>
      <div v-for="(i,index) in initList" v-if="Id==i.id">
        <div class="center">
          <p>{{i.name}}</p>
          <p v-for="(i,index) in i.goods_spec_format" class="center_p">
                    <span v-for="(i,index) in i.value">
                   {{i.spec_name}}：{{i.spec_value_name}}
                   </span>
             </p>
        </div>
        <div class="prompt">
          <div>
            <div class="promptText">项目介绍</div>
            <div class="card">
              <div>有效期：</div>
              <div v-html="i.detail">{{i.detail}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "playGuide",
      data() {
        return {
          initList:[],
          images:[],
          Id:this.$route.query.Id,
          imgUrl:this.$route.query.imgUrl,
        }
      },
      mounted() {;
        this.getInitList();
        this.getImg()
      },
      methods: {
        //返回
        onClickLeft() {
          this.$router.back();
        },
        //初始化轮播图片
        async getImg() {
          let params = {
            product_id: this.Id
          };
          const res = await this.$axios.post(this.$api.travelDetailsImg, params);
          if (res.success) {
            this.images=res;
          } else {
            this.$toast(res.msg);
          }
        },
        //初始化页面列表
        async getInitList() {
          let params = {
            scenicSpotId: this.$route.query.scenicSpotId
          };
          const res = await this.$axios.post(this.$api.travelDetailsData, params);
          if (res.success) {
              this.initList=res.data;
              this.initList.forEach((i, index) => {
                if (typeof i.goods_spec_format=="string") {
                  i.goods_spec_format = JSON.parse(i.goods_spec_format);
                }
              });
          } else {
            this.$toast(res.msg);
          }
        },
      },
    }
</script>

<style scoped>
.playGuide{width: 100%;background-color: #f7f7f7;height: 100vh;}
.header{width: 100%;}
  .banner{
    margin-top: 0.46rem;
    width:100%;
  }
  .van-swipe{
    height: 1.72rem;
  }
  .img{
    height: 1.72rem;
  }
.img img, .van-swipe-item img{
  width: 100%;
  height: 100%;
}
  .banner img {
    width:100%;
    height: 100%;
  }
  .van-swipe__indicators{
    bottom: 0.2rem;
  }
  .center{background-color: #fff;border-top-right-radius: 0.08rem;border-top-left-radius: 0.08rem;position: relative;top:-0.05rem;}
  .center p:nth-child(1){font-size: 0.15rem;color: #333333;font-weight: 600;padding: 0.1rem 0.15rem;}
  .center_p{font-size: 0.12rem;color: #8c8c8c;padding: 0 0.15rem 0.1rem;}
.prompt {
  margin-top: 0.15rem;
  padding: 0 0.15rem;
}
.prompt > div {
  background: #fff;
  border-radius: 8px;
  padding: 0.1rem 0.15rem;
  font-size: 0.15rem;
  color: #333333;
}
.prompt .promptText {
  border-bottom: 1px solid #f7f7f7;
  padding-bottom: 0.06rem;
}
.prompt .card {
  padding: 0.05rem 0 0.2rem;
  overflow: hidden;
}
</style>
